Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Introduce an html module with plain HTML elements #3900

Merged
merged 7 commits into from
Oct 25, 2024
Merged

Conversation

falkoschindler
Copy link
Contributor

@falkoschindler falkoschindler commented Oct 18, 2024

Following up on #572 (reply in thread), this PR introduces an html module for creating plain HTML elements. They are basically shortcuts for ui.element(<tag>) and allow passing inner HTML as optional positional argument and arbitrary attributes as keyword arguments. Nesting, classes, styling and event subscriptions work like with regular NiceGUI elements. Here's a quick demo:

from nicegui import html

with html.p():
    html.a('Link', href='https://google.com').classes('text-red-500')
    html.hr()
    html.button('Button').on('click', lambda: print('Hello World'))
    html.img(src='https://picsum.photos/400/300', width='200')

Open tasks:

  • Should we exclude "unusable" elements like html, head, and body? This might not be obvious in all cases.
  • Add it to the documentation.
  • Add pytests for some elements like button?

@falkoschindler falkoschindler added the enhancement New feature or request label Oct 18, 2024
@falkoschindler falkoschindler self-assigned this Oct 18, 2024
@falkoschindler falkoschindler added this to the 2.5 milestone Oct 18, 2024
@falkoschindler falkoschindler marked this pull request as ready for review October 24, 2024 16:24
@falkoschindler falkoschindler requested a review from rodja October 24, 2024 16:24
Copy link
Member

@rodja rodja left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great. I just added a small note and demo on how to use the props.

@falkoschindler falkoschindler merged commit 3e65af2 into main Oct 25, 2024
6 checks passed
@falkoschindler falkoschindler deleted the html-elements branch October 25, 2024 15:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants